<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:r="http://ricchieri.com/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>


	<ui:composition template="../../templates/commonLayoutReservation.xhtml">
		<ui:define name="title">#{msg.titleReservation}</ui:define>
		<ui:define name="content">
			<h:form id="addReservation">
				<p:messages showDetail="false" autoUpdate="true" closable="false" severity="fatal"/> 
				<h2>#{msg.addreservation}</h2> 
				<p:wizard widgetVar="wiz" flowListener="#{addReservationMB.onFlowProcess}" showStepStatus="true" showNavBar="false" step="#{addReservationMB.skipStep()}">
					<p:tab id="calendar" title="#{msg.calendar}">
					
						<p:panel> 
							<h:outputLabel value="#{msg.capacity}" style="text-align:center; width:100%"/>
							<p:panelGrid columns="4" style="margin-bottom:10px;text-align: center;">
								<p:outputPanel>
									<span class="full-capacity">Empty</span>
									<h:outputLabel value="#{msg.fullCapacity}"/>
								</p:outputPanel>
								
								<p:outputPanel>
									<span class="low-capacity">Empty</span>
									<h:outputLabel value="#{msg.lowCapacity}"/>
								</p:outputPanel>
								
								<p:outputPanel>
									<span class="medium-capacity">Empty</span>
									<h:outputLabel value="#{msg.mediumCapacity}"/>
								</p:outputPanel>
								
								<p:outputPanel>
									<span class="high-capacity">Empty</span>
									<h:outputLabel value="#{msg.highCapacity}"/>
								</p:outputPanel>
							</p:panelGrid>
							<h:panelGrid columns="2">
								<h:outputLabel value="#{msg.tripOrientation}" />
								<p:selectOneMenu value="#{addReservationMB.scheduleCharterFilter.trip}">
									<f:selectItems value="#{addReservationMB.trips}" />
									<p:ajax listener="#{addReservationMB.changeTrip}" update="schedule"/>
								</p:selectOneMenu>
							</h:panelGrid>
							<p:schedule id="schedule" value="#{addReservationMB.scheduleLazyModel}" draggable="false" resizable="false" widgetVar="myschedule" style="padding-top:15px;" timeFormat="HH:mm">  
								<p:ajax event="eventSelect" listener="#{addReservationMB.onEventSelect}" update="eventDetails" oncomplete="eventDialog.show()" /> 
							</p:schedule>
							
							<p:dialog id="eventDialog" widgetVar="eventDialog" header="#{msg.eventDetails}" showEffect="clip" hideEffect="clip" maximizable="false" minimizable="false" resizable="false">
					        	<h:panelGrid id="eventDetails" columns="2">
					
						            <h:outputLabel style="font-weight:bold" value="#{msg.date}" />
						            <h:outputLabel value="#{addReservationMB.formatDate(addReservationMB.event.scheduleCharter.schedule.date)}" />
						            
						            <h:outputLabel style="font-weight:bold" value="#{msg.time}" />
						            <h:outputLabel value="#{addReservationMB.event.scheduleCharter.schedule.time}" />
						
									<h:outputLabel style="font-weight:bold" value="#{msg.charterNumber}" />
									<h:outputLabel value="#{addReservationMB.event.scheduleCharter.charter.charterNumber}" />  
						
									<h:outputLabel style="font-weight:bold" value="#{msg.charterType}"/>
									<h:outputLabel value="#{addReservationMB.obtainDescription(addReservationMB.event.scheduleCharter.charter.charterType.description)}" /> 
	
									<h:outputLabel style="font-weight:bold" value="#{msg.charterPlaces}"/>
									<h:outputLabel value="#{addReservationMB.event.scheduleCharter.charter.places}" />  
									
									<h:outputLabel style="font-weight:bold" value="#{msg.reservationsTotal}"/>
									<h:outputLabel value="#{addReservationMB.event.scheduleCharter.quantityReserved}" />  
									 
									<h:outputLabel style="font-weight:bold" value="#{msg.scheduleDriver}"/>
									<h:outputLabel value="#{addReservationMB.event.scheduleCharter.user.getFullName()}" /> 

					       	 	</h:panelGrid>
								<center>
									<p:commandButton value="#{msg.select}" update="eventDetails" action="#{addReservationMB.selectEvent()}" oncomplete="handleRequest(xhr, status, args)"/>
								</center>
					    	</p:dialog>
					    	
						</p:panel>
					</p:tab>
					
					<p:tab id="user" title="#{msg.pax}">
						<p:panel> 
					     	<h:panelGrid columns="2">
					     		<h:outputLabel value="#{msg.first_name}" />
					     		<p:inputText value="#{addReservationMB.userFilter.firstName}"/>
					     		
					     		<h:outputLabel value="#{msg.last_name}" />  
							    <p:inputText value="#{addReservationMB.userFilter.lastName}" />
					            
					            <h:outputLabel value="#{msg.documentType}"/>
					     		<p:selectOneMenu value="#{addReservationMB.userFilter.documentType}">
					                <f:selectItems value="#{addReservationMB.documents}" />   
					            </p:selectOneMenu> 
					            
					     		<h:outputLabel value="#{msg.documentNum}" />
							    <p:inputText value="#{addReservationMB.userFilter.dni}" onkeypress="javascript:return isAlphanumericKey(event);"/>
					            
							</h:panelGrid>
							<h:panelGrid columns="2" style="margin-top:10px; text-align:center">
				     			<r:commandLinkCustom id="reset" action="#{addReservationMB}" method="reset" icon="icon-eraser" message="#{msg.resetButton}"/>
			     				<r:commandLinkCustom id="search" action="#{addReservationMB}" method="search" icon="icon-search" message="#{msg.searchButton}"/>
				     	 	</h:panelGrid>
				     	 	
				     	 	<p:blockUI block="userTable" trigger="userTable">  
						        #{msg.loading}<br />  
						        <p:graphicImage value="/images/ajax-loader.gif"/>  
						    </p:blockUI>
				     	 	<p:dataTable var="user" value="#{addReservationMB.userLazyDataModel}" 
				     	 		style="padding-top:15px" paginator="true" lazy="true" id="userTable"
				     	 		rows="10"
				     	 		paginatorPosition="bottom" emptyMessage="#{msg.noRecordsFound}">
				 
				 		 		<p:column headerText="#{msg.full_name}" style="width:30%">  
					            	<h:outputText value="#{user.getFullName()}" />   
				        		</p:column> 
				 
				 				<p:column headerText="#{msg.documentType}" style="width:7%">  
					            	<h:outputText value="#{addReservationMB.obtainDescription(user.documentType.description)}" />   
				        		</p:column> 
				        		
						        <p:column headerText="#{msg.documentNum}" style="width:20%" sortBy="#{user.dni}">  
					            	<h:outputText value="#{user.dni}" />   
				        		</p:column> 
				        		
				        		<p:column headerText="#{msg.email}" style="width:10%" >  
					            	<h:outputText value="#{user.getDefaultEmail().email}" />   
				        		</p:column>
				        		
				        		<p:column style="width:10%" headerText="#{msg.actions}">
				        		
				        			<div style="text-align: center">
				        				<p:commandButton value="#{msg.select}" update="@form" action="#{addReservationMB.setSelectedUser(user)}" oncomplete="wiz.next()" rendered="#{!addReservationMB.haveReservation(user)}"/>
			        					<p:commandButton value="#{msg.modify}" oncomplete="editUserDialog.show();" update="@form :editUserForm" action="#{addReservationMB.editUser()}" ajax="true" rendered="#{!addReservationMB.haveReservation(user)}"/>
				        			</div>
				        			
				        			<div style="text-align: center">
					        			<p:outputPanel rendered="#{addReservationMB.haveReservation(user)}">
					        				<div style="white-space:initial !important;color:red">#{msg.reservationExist}</div>
					        			</p:outputPanel>
				        			</div>
				        		</p:column>
				        		<p:column headerText="#{msg.observation}" style="width:20%">  
				        			<p:outputPanel rendered="#{user.block}">
				        				<div style="word-wrap: break-word;white-space:initial !important">#{user.blockMotive}</div>
				        			</p:outputPanel> 
				        		</p:column> 
				        		
				        		
						    </p:dataTable>
						    
					        <div style="text-align:right">
						       <p:commandLink oncomplete="newUserDialog.show();" ajax="true" styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-action">
		        					<span class="ui-button-text ui-c"><i class="icon-user"></i><r:space/><r:space/>#{msg.newPassenger}</span>
		        			   </p:commandLink>
		        			 
						    </div>
						    
						</p:panel>
						<div style="text-align:right; margin-top:10px" >	
							<p:commandLink update="@form" onclick="wiz.back();" styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-action">
								<span class="ui-button-text ui-c"><i class="icon-arrow-left"></i><r:space/><r:space/>#{msg.previous}</span>
							</p:commandLink>
						</div>
					</p:tab>
					
					<p:tab id="travelData" title="#{msg.travelData}">
						<p:panel> 
							<h:panelGrid columns="3">
											       	 	
				       	 		<h:outputLabel style="font-weight:bold" value="#{msg.reservationType}"/>
				       	 		<p:selectOneMenu value="#{addReservationMB.selectedReservationType}" id="reservationType">
									<f:selectItems value="#{addReservationMB.reservationType}" />
								</p:selectOneMenu>
								<p:message id="reservationTypeMsg" for="reservationType" display="icon"/>
								
								<h:outputLabel style="font-weight:bold" value="#{msg.passengerType}"/>
				       	 		<p:selectOneMenu value="#{addReservationMB.selectedPassengerType}" id="passengerType">
									<f:selectItems value="#{addReservationMB.passengerType}" />
								</p:selectOneMenu>
								<p:message id="passengerTypeMsg" for="passengerType" display="icon"/>
								
								<h:outputLabel style="font-weight:bold" value="#{msg.meanPayment}"/>
				       	 		<p:selectOneMenu value="#{addReservationMB.selectedMeanPayment}" id="meanPayment">
									<f:selectItems value="#{addReservationMB.meanPayment}" />
								</p:selectOneMenu>
								<p:message id="meanPaymentMsg" for="meanPayment" display="icon"/>
								
								<h:outputLabel style="font-weight:bold" value="#{msg.tripPrice}"/>
								<p:inputText id="tripPrice" value="#{addReservationMB.reservation.cost}" maxlength="5" onkeypress="return isDecimalNumberKey(event)"/>
								<p:message id="tripPriceMsg" for="tripPrice" display="icon"/>
								
								<h:outputLabel style="font-weight:bold" value="#{msg.upOn}"/>
								<p:inputText id="upOn" value="#{addReservationMB.reservation.upOn}" maxlength="50" required="true" requiredMessage="#{msg.requiredUpOn}"/>
								<p:message id="upOnMsg" for="upOn" display="icon"/>
								
								<h:outputLabel style="font-weight:bold" value="#{msg.downOn}"/>
								<p:inputText id="downOn" value="#{addReservationMB.reservation.downOn}" maxlength="50" required="true" requiredMessage="#{msg.requiredDownOn}"/>
								<p:message id="downOnMsg" for="downOn" display="icon"/>
								
								<h:outputLabel style="font-weight:bold" value="#{msg.reservationComments}"/>
								<p:inputTextarea rows="6" style="width:90%" id="observation" value="#{addReservationMB.reservation.observation}" maxlength="500" autoResize="false"/>
								<p:message id="observationMsg" for="observation" display="icon"/>
						
							</h:panelGrid>
						</p:panel>
						<div style="text-align:right; margin-top:10px">
							<div style="display: inline;">	
								<p:commandLink update="@form" onclick="wiz.back();" styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-action">
									<span class="ui-button-text ui-c"><i class="icon-arrow-left"></i><r:space/><r:space/>#{msg.previous}</span>
								</p:commandLink>
							
								<p:commandLink update="@form" oncomplete="handleRequestTravelData(xhr, status, args);" 
									styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-action" 
									action="#{addReservationMB.validateTravelData}">
									<span class="ui-button-text ui-c">#{msg.next}<r:space/><r:space/><i class="icon-arrow-right"></i></span>
								</p:commandLink>
							</div>
						</div>
						
					</p:tab>
					
					<p:tab id="confirmation" title="#{msg.confirmation}">
						<p:panel> 
							<h:panelGrid columns="2">
								<h:outputLabel style="font-weight:bold" value="#{msg.date}" />
					            <h:outputLabel value="#{addReservationMB.formatDate(addReservationMB.scheduleCharter.schedule.date)}" />
					            
					            <h:outputLabel style="font-weight:bold" value="#{msg.time}" />
					            <h:outputLabel value="#{addReservationMB.scheduleCharter.schedule.time}" />
					
								<h:outputLabel style="font-weight:bold" value="#{msg.charterNumber}" />
								<h:outputLabel value="#{addReservationMB.scheduleCharter.charter.charterNumber}" />  
					
								<h:outputLabel style="font-weight:bold" value="#{msg.charterType}"/>
								<h:outputLabel value="#{addReservationMB.obtainDescription(addReservationMB.scheduleCharter.charter.charterType.description)}" /> 

								<h:outputLabel style="font-weight:bold" value="#{msg.charterPlaces}"/>
								<h:outputLabel value="#{addReservationMB.scheduleCharter.charter.places}" />   
					
								<h:outputLabel style="font-weight:bold" value="#{msg.scheduleDriver}"/>
								<h:outputLabel value="#{addReservationMB.scheduleCharter.user.getFullName()}" /> 
							
								<h:outputLabel style="font-weight:bold" value="#{msg.full_name}" />
					     		<h:outputLabel value="#{addReservationMB.selectedUser.getFullName()}"/>
					     			    
							    <h:outputLabel style="font-weight:bold" value="#{msg.documentType}" />
							    <h:outputLabel value="#{addReservationMB.obtainDescription(addReservationMB.selectedUser.documentType.description)}"/>
					            
					     		<h:outputLabel style="font-weight:bold" value="#{msg.documentNum}" />
							    <h:outputLabel value="#{addReservationMB.selectedUser.dni}"/>
							    
							    <h:outputLabel style="font-weight:bold" value="#{msg.reservationType}"/>	
							    <h:outputLabel value="#{addReservationMB.obtainDescription(addReservationMB.reservation.reservationType.description)}"/>
							    
							    <h:outputLabel style="font-weight:bold" value="#{msg.passengerType}"/>	
							    <h:outputLabel value="#{addReservationMB.obtainDescription(addReservationMB.reservation.passengerType.description)}"/>
							    
							    <h:outputLabel style="font-weight:bold" value="#{msg.meanPayment}"/>	
							    <h:outputLabel value="#{addReservationMB.obtainDescription(addReservationMB.reservation.meanPayment.description)}"/>	
							    
							    <h:outputLabel style="font-weight:bold" value="#{msg.upOn}"/>	  
							    <h:outputLabel value="#{addReservationMB.reservation.upOn}"/>
							    
							    <h:outputLabel style="font-weight:bold" value="#{msg.downOn}"/>	  
							    <h:outputLabel value="#{addReservationMB.reservation.downOn}"/>
							    
							    <h:outputLabel style="font-weight:bold" value="#{msg.tripPrice}"/>	  
							    <h:outputLabel value="#{addReservationMB.reservation.cost}"/>
							    
							    <h:outputLabel style="font-weight:bold" value="#{msg.reservationComments}"/>  
							    <h:outputLabel value="#{addReservationMB.reservation.observation}"/>
					
							</h:panelGrid>
						</p:panel>
						<div style="text-align:right; margin-top:10px">
							<div style="display: inline;">	
								<p:commandLink update="@form" onclick="wiz.back();" styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-action">
									<span class="ui-button-text ui-c"><i class="icon-arrow-left"></i><r:space/><r:space/>#{msg.previous}</span>
								</p:commandLink>
								
								<p:commandLink styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-action" 
									update="@form" action="#{addReservationMB.saveReservation}">
									<span class="ui-button-text ui-c"><i class="icon-save"></i><r:space/><r:space/>#{msg.doReservation}</span>
								</p:commandLink>
							</div>
						</div>
					</p:tab>			
				</p:wizard>
				
				<script type="text/javascript">
					function handleRequest(xhr, status, args) {
				        if(args.validationFailed || !args.isValid) {
							return;
				        } else {
				        	eventDialog.hide();
				        	wiz.next();
				        }
				    }
					
					function handleRequestTravelData(xhr, status, args) {
				        if(args.validationFailed || !args.isValid) {
							return;
				        } else {
				        	wiz.next();
				        }
				    }
				</script>
			</h:form>
			
			<h:form>
				<p:dialog id="newUserDialog" widgetVar="newUserDialog" header="#{msg.newPassenger}" showEffect="clip" hideEffect="clip" maximizable="false" minimizable="false" resizable="false" height="570" width="700">
		        	<h:panelGrid id="userDetails" columns="1">
		        		<p:messages showDetail="false" autoUpdate="true" closable="false" severity="fatal"/>
		        		<r:commonUser manageBean="#{addReservationMB.addPassengerReservationManageBean}" user="#{addReservationMB.addPassengerReservationManageBean.user}" showPassword="false" showRoles="false" showJobData="false"/>
	    				</h:panelGrid>
				    <h:panelGrid columns="2" style="margin-top: 10px; text-align: center">
			     		<p:commandButton id="resetUser" value="#{msg.resetButton}" action="#{addReservationMB.resetUser}" update="userDetails" process="@this" styleClass="button-action green"/>
			     		<p:commandButton id="addUser" value="#{msg.addButton}" action="#{addReservationMB.saveUser}" update="userDetails" styleClass="button-action green" oncomplete="handleNewPassengerRequest(xhr, status, args)"/>
			     	</h:panelGrid>
		        </p:dialog>		        
					        
				<script type="text/javascript">					
					function handleNewPassengerRequest(xhr, status, args) {
				        if(args.validationFailed || !args.isValid) {
							return;
				        } else {
				        	newUserDialog.hide();
				        	wiz.next();
				        }
				    }
				</script>
			</h:form>
			
			<h:form id="editUserForm">			    
				<p:dialog id="editUserDialog" widgetVar="editUserDialog" header="#{msg.passengerData}" showEffect="clip" hideEffect="clip" maximizable="false" 
					minimizable="false" resizable="false" height="570" width="700">
		        	<h:panelGrid id="editUserDetails" columns="1">
		        		<p:messages showDetail="false" autoUpdate="true" closable="false" severity="fatal"/>
		        		<r:commonUser manageBean="#{addReservationMB.editPassengerReservationManageBean}" user="#{addReservationMB.editPassengerReservationManageBean.user}" showPassword="false" showRoles="false" showJobData="false"/>
	    			</h:panelGrid>
				    <h:panelGrid columns="2" style="margin-top: 10px; text-align: center">
			     		<p:commandButton id="editUser" value="#{msg.saveButton}" action="#{addReservationMB.saveChangesUser}" update="editUserDetails" styleClass="button-action green" oncomplete="handleEditPassengerRequest(xhr, status, args)"/>
			     	</h:panelGrid>
		        </p:dialog>			        
					        
				<script type="text/javascript">					
					function handleEditPassengerRequest(xhr, status, args) {
				        if(args.validationFailed || !args.isValid) {
							return;
				        } else {
				        	editUserDialog.hide();
				        	wiz.next();
				        }
				    }
				</script>
			</h:form>
			
		</ui:define>
	</ui:composition>
</h:body>
</html>
